<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-warning row justify-center items-center content-center">
      <q-bar
        class="full-width justify-end bg-warning"
        style="height: 50px; line-height: 50px"
      >
        <q-btn
          round
          flat
          color="white"
          icon="close"
          size="20px"
          v-close-popup
        />
      </q-bar>
      <q-card-section
        class="row justify-center items-center content-center"
        style="height: calc(100vh - 50px)"
      >
        <q-card-section class="justify-center">
          <q-spinner-cube color="white" size="20em"/>
        </q-card-section>
        <q-card-section
          style="width: 25rem"
          class="justify-center row q-gutter-lg"
        >
          <div class="text-h2 text-bold text-center text-white">
            电量过低
          </div>
          <div
            class="text-white text-bold text-h5 q-pa-md text-center"
            style="
              background: transparent;
              border-radius: 1rem;
              backdrop-filter: blur(10px) brightness(50%);
            "
          >
            <div>
              {{ message }}
            </div>
          </div>

          <!--          <q-btn-->
          <!--            color="negative"-->
          <!--            class="text-bold"-->
          <!--            size="xl"-->
          <!--            outline-->
          <!--            icon="clear"-->
          <!--            :label="$t(lang + '复位并清空队列')"-->
          <!--            @click="clear"-->
          <!--          />-->
          <!--          <q-btn-->
          <!--            color="primary"-->
          <!--            class="text-bold"-->
          <!--            size="xl"-->
          <!--            outline-->
          <!--            icon="play_arrow"-->
          <!--            :label="$t(lang + '复位并重试指令')"-->
          <!--            @click="resume"-->
          <!--          />-->
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import {onUnmounted, ref} from "vue";
import {useAPIStore} from "stores/api/index.js";
import {api} from "boot/axios.js";
import {useQuasar} from "quasar";

const lang = "indexPage.deviceError.";
const $q = useQuasar();
const visible = ref(false);
const audioPlayer = ref()

const props = defineProps({
  message: {type: String, default: ''}
});


defineExpose({visible});
</script>
